<template>
  <div>
    <h2>路由表</h2>
    <p>以下规则当前在系统中处于活动状态。</p>
    <div class="ARP">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>ARP</span>
        </div>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="ipv4address" label="IPV4地址">
          </el-table-column>
          <el-table-column prop="macaddress" label="MAC地址">
          </el-table-column>
          <el-table-column prop="interface" label="接口"> </el-table-column>
        </el-table>
      </el-card>
    </div>

    <div class="IPV4">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>活动的 IPv4 路由</span>
        </div>
        <el-table :data="active4" style="width: 100%">
          <el-table-column prop="Internet" label="网络">
          </el-table-column>
          <el-table-column prop="object" label="对象">
          </el-table-column>
          <el-table-column prop="IPV4gateway" label="IPV4网关">
          </el-table-column>
          <el-table-column prop="point" label="跃点数"> </el-table-column>
          <el-table-column prop="chart" label="表"> </el-table-column>
        </el-table>
      </el-card>
    </div>

    <div class="IPV6">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>活动的 IPv6 路由</span>
        </div>
        <el-table :data="active6" style="width: 100%">
          <el-table-column prop="Internet" label="网络">
          </el-table-column>
          <el-table-column prop="object" label="对象">
          </el-table-column>
          <el-table-column prop="address" label="源地址"> </el-table-column>
          <el-table-column prop="point" label="跃点数"> </el-table-column>
          <el-table-column prop="chart" label="表"> </el-table-column>
        </el-table>
      </el-card>
    </div>

    <div class="IPV6neighbour">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>IPv6 网上邻居</span>
        </div>
        <el-table :data="neighbour" style="width: 100%">
          <el-table-column prop="IPV6address" label="IPV6地址">
          </el-table-column>
          <el-table-column prop="macaddress" label="MAC地址">
          </el-table-column>
          <el-table-column prop="interface" label="接口"> </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          ipv4address: "192.168.56.1",
          macaddress: "00:50:56:c0:00:01",
          interface: "br-lan",
        },
      ],
      active4: [
        {
          Internet: "docker0",
          object: "172.17.0.0/16",
          point: "0",
          chart: "main",
        },
        {
          Internet: "lan",
          object: "192.168.56.0/24",
          point: "0",
          chart: "main",
        },
      ],
      active6: [
        {
          Internet: "lan",
          object: "192.168.56.0/24",
          point: "0",
          chart: "main",
        },
      ],
      neighbour: [
        {
          IPV6address: "fddc:d3a0:de3b:0:2c82:d555:fb49:1876",
          macaddress: "00:50:56:c0:00:01 	",
          interface: "lan",
        },
      ],
    };
  },
};
</script>

<style scoped>
p {
  color: #999;
}
.ARP,.IPV4,.IPV6,.IPV6neighbour
{
  margin-top: 30px;
}
.el-table {
  margin-top: 0px;
}
.el-card__body {
  padding-top: 0px;
}

</style>